import React, { Component } from 'react'
import { connect } from 'react-redux'
import { View, Text, StyleSheet } from 'react-native'
import { Router, Scene, Actions, ActionConst } from 'react-native-router-flux'

import ImagePosts from './ImagePosts'
import ImageDetail from './ImageDetail'
import VideoDetail from './VideoDetail'
import TextPosts from './TextPosts'
import VideoPosts from './VideoPosts'
import FavoriteImagePosts from './FavoriteImagePosts'
import FavoriteTextPosts from './FavoriteTextPosts'
import FavoriteVideoPosts from './FavoriteVideoPosts'

import NavigationDrawer from '../components/NavigationDrawer'
import Login from './Login'
import {
  odooActionCreators,
  ListViewActions
} from '../redux'


class TabIcon extends Component {
    render(){
        return (
            <Text style={{color: this.props.selected ? 'red' :'black'}}>{this.props.title}</Text>
        );
    }
}

const style = StyleSheet.create({
  tabBarStyle: {
    backgroundColor: '#eee',
  },
});
class AppRouter extends Component {

  componentWillMount() {
    this.props.dispatch(odooActionCreators.getImages())
    this.props.dispatch(odooActionCreators.getTexts())
    this.props.dispatch(odooActionCreators.getVideos())
  }

  render() {
    return (
      <Router>
        <Scene key="root">
          {/* open对应Drawer的state.open状态 */}
          {/* <Scene key="drawer" component={NavigationDrawer} open={false}> */}
            <Scene key="tabbar" tabs={true} hideNavBar={true}
              tabBarStyle={style.tabBarStyle} direction={'vertical'} >
              <Scene key="images" title="图片" icon={TabIcon}
                navigationBarStyle={{backgroundColor:'red'}}
                titleStyle={{color:'white'}}
                onPress={()=> {
                  this.props.dispatch(odooActionCreators.getImages(ListViewActions.REFRESH))
                  Actions.imagePosts({type: ActionConst.REFRESH})
                }}
              >
                <Scene
                  key="imagePosts"
                  component={ImagePosts}
                  title="图片列表"
                  initial={true}
                />
                <Scene
                  key="imageDetail"
                  hideTabBar={true}
                  component={ImageDetail}
                  title="图片详情"
                />
              </Scene>
              <Scene key="texts" title="段子" icon={TabIcon}
                navigationBarStyle={{backgroundColor:'red'}}
                titleStyle={{color:'white'}}
                onPress={()=> {
                  this.props.dispatch(odooActionCreators.getTexts(ListViewActions.REFRESH))
                  Actions.textPosts({type: ActionConst.REFRESH})
                }}>
                <Scene
                  key="textPosts"
                  component={TextPosts}
                  title="段子列表"
                />
              </Scene>
              <Scene key="videos" title="视频" icon={TabIcon}
                navigationBarStyle={{backgroundColor:'red'}}
                titleStyle={{color:'white'}}
                onPress={()=> {
                  this.props.dispatch(odooActionCreators.getVideos(ListViewActions.REFRESH))
                  Actions.videoPosts({type: ActionConst.REFRESH})
                }}>
                <Scene
                  key="videoPosts"
                  component={VideoPosts}
                  title="视频列表"
                />
                <Scene
                  key="videoDetail"
                  component={VideoDetail}
                  hideTabBar={true}
                  title="视频详情"
                />
              </Scene>
              <Scene key="loginTab" title="用户" icon={TabIcon}
              navigationBarStyle={{backgroundColor:'red'}}
              titleStyle={{color:'white'}}>
                <Scene
                  key="login"
                  component={ Login }
                  title="用户信息"
                />
              </Scene>
            </Scene>
          {/* </Scene> */}
          <Scene key="favoriteTabbar" tabs={true} duration={1}
            tabBarStyle={style.tabBarStyle} direction={'vertical'}>
            <Scene key="favoriteImageTab" title="图片" icon={TabIcon}
            navigationBarStyle={{backgroundColor:'red'}}
            titleStyle={{color:'white'}}>
              <Scene
                key="favoriteImages"
                component={(props) => <FavoriteImagePosts {...props} level="favorite"/>}
                title="收藏的图片"
              />
              <Scene
                key="favoriteImageDetail"
                component={ImageDetail}
                title="图片详情"
              />
            </Scene>
            <Scene key="favoriteTextTab" title="段子" icon={TabIcon}
            navigationBarStyle={{backgroundColor:'red'}}
            titleStyle={{color:'white'}}>
              <Scene
                key="favoriteTexts"
                component={(props) => <FavoriteTextPosts {...props} level="favorite"/>}
                title="收藏的段子"
              />
            </Scene>
            <Scene key="favoriteVideoTab" title="视频" icon={TabIcon}
            navigationBarStyle={{backgroundColor:'red'}}
            titleStyle={{color:'white'}}>
              <Scene
                key="favoriteVideos"
                component={(props) => <FavoriteVideoPosts {...props} level="favorite"/>}
                title="收藏的视频"
              />
              <Scene
                key="favoriteVideoDetail"
                component={VideoDetail}
                title="视频详情"
              />
            </Scene>
          </Scene>
          <Scene key="likeTabbar" tabs={true}
            tabBarStyle={style.tabBarStyle} direction={'vertical'} duration={1} >
            <Scene key="likeImageTab" title="图片" icon={TabIcon}
            navigationBarStyle={{backgroundColor:'red'}}
            titleStyle={{color:'white'}}>
              <Scene
                key="likeImages"
                component={(props) => <FavoriteImagePosts {...props} level="like"/>}
                title="点赞的图片"
              />
              <Scene
                key="likeImageDetail"
                component={ImageDetail}
                title="图片详情"
              />
            </Scene>
            <Scene key="likeTextTab" title="段子" icon={TabIcon}
            navigationBarStyle={{backgroundColor:'red'}}
            titleStyle={{color:'white'}}>
              <Scene
                key="likeTexts"
                component={(props) => <FavoriteTextPosts {...props} level="like"/>}
                title="点赞的段子"
              />
            </Scene>
            <Scene key="likeVideoTab" title="视频" icon={TabIcon}
            navigationBarStyle={{backgroundColor:'red'}}
            titleStyle={{color:'white'}}>
              <Scene
                key="likeVideos"
                component={(props) => <FavoriteVideoPosts {...props} level="like"/>}
                title="点赞的视频"
              />
              <Scene
                key="likeVideoDetail"
                component={VideoDetail}
                title="视频详情"
              />
            </Scene>
          </Scene>
        </Scene>
      </Router>
    )
  }
}

export default connect()(AppRouter)
